javascript's tips on dealing with || expressions

  • 2020-05-27 04:12:10
  • OfStack

If you are new to JavaScript and have read through all of these techniques and how each technique can be used in the future, you will write a more concise and efficient JavaScript program.

Sure, JavaScript masters have used these techniques to write powerful, efficient JavaScript programs, but you can.

powerful & & And |, |
You may have seen them in the JavaScript library and the JavaScript framework, so let's start with a few basic examples:

Example 1. || (or)
Set the default value, usually used


function documentTitle(theTitle) {
  if (!theTitle) {
 theTitle = "Untitled Document";
  }
}

Use this instead:


function documentTitle(theTitle) {
  theTitle = theTitle || "Untitled Document";
}

Resolution:

First, read the "hints" box below to review how JavaScript determines Boolean values
The || operator first determines whether the expression is true or false from the left. If it is true, it immediately returns the value returned by the expression on the left. If the left expression is judged false, continue to evaluate the right expression and return the value of the right expression
If theTitle is judged false, it returns the value of the expression on the right; in other words, if the theTitle variable is judged true, it returns the value of theTitle.
! Tip:
Values judged false by JavaScript: null, false, 0, undefined, NaN and ""(empty string).
Remember that values of class NaN like Infinity(infinite) are judged to be true and not false. However, NaN is judged to be false.
In addition to the above, all other values are judged to be true.

Example 2. & & (and)

Don't do it:


function isAdult(age) {
 if (age && age > 17) {
  return true;
 } else {
  return false;
 }
}

Use this instead:


function isAdult(age) {
  return age && age > 17;
}

Resolution:

& & The operator judges the expression from the left, and if the expression on the left is judged false, this immediately returns false, whether or not the expression on the right is true.
If the expression on the left is true, continue judging the expression on the right, and return the result of the expression on the right
It's getting more and more interesting

Example 3.

Don't do this:


if (userName) {
 logIn(userName);
} else {
 signUp();
}

Use this instead:


userName && logIn(userName) || signUp();

Resolution:

If userName is true, call the logIn function and pass the userName variable
If userName is false, the call to the logIn function does not pass any variables

Example 4.
Don't do this:


var userID;

if (userName && userName.loggedIn) {
 userID = userName.id;
} else {
 userID = null;
}

Use this instead:


var userID = userName && userName.loggedIn && userName.id;

Resolution:

If userName is true, user.loggedIn is called and user.loggedIn is checked for true; If true, the return value of the third expression is returned
If userName is empty, return null

That's the first javascript tip I want to share with you in this article. I hope you enjoy it.


Related articles: